<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo6</title>
  <meta charset="UTF-8">
  <!--
  实体
    使用实体名而不是数字的好处,名称容易记忆
    空格	&nbsp;	&#160;
  <	小于号	&lt;	&#60;
  >	大于号	&gt;	&#62;
  &	和号	&amp;	&#38;
  "	引号	&quot;	&#34;
  '	撇号 	&apos; (IE不支持)	&#39;
  ￠	分（cent）	&cent;	&#162;
  £	镑（pound）	&pound;	&#163;
  ¥	元（yen）	&yen;	&#165;
  €	欧元（euro）	&euro;	&#8364;
  §	小节	&sect;	&#167;
  ©	版权（copyright）	&copy;	&#169;
  ®	注册商标	&reg;	&#174;
  ™	商标	&trade;	&#8482;
  ×	乘号	&times;	&#215;
  ÷	除号	&divide;	&#247;

  表情符号
  表情符号 emoji 来自UTF-8字符集的字符 ,UTF-8几乎涵盖世界上所有字符和符号
  使用数字或者是实体编号来显示他们 a是65 b是66 c是67
  为了让浏览器了解您正在显示字符，您必须以 &# 开头并以 ;（分号）结束实体编号。
  ASCII 是第一个字符编码标准,ASCII 定义了 128 种可以在互联网上使用的字符：数字（0-9）、英文字母（A-Z）和一些特殊字符，比如：! $ + - ( ) @ < >。
  ISO-8859-1 是 HTML 4 的默认字符集。此字符集支持 256 个不同的字符代码。HTML 4 同时支持 UTF-8。
  ANSI（Windows-1252）是原始的 Windows 字符集。 ANSI 与 ISO-8859-1 相同，不同之处在于 ANSI 具有 32 个额外的字符。
  HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集，该字符集涵盖了世界上几乎所有的字符和符号！
  URL 网址
    scheme://host.domain:port/path/filename
  解释：

  scheme - 定义因特网服务的类型。最常见的类型是 http
  host - 定义域主机（http 的默认主机是 www）
  domain - 定义因特网域名，比如 w3school.com.cn
  :port - 定义主机上的端口号（http 的默认端口号是 80）
  path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
  filename - 定义文档/资源的名称
  编者注：URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。

  html 框架
  在同一个浏览器窗口中显示不止一个页面 每份html文档称为一个框架,每个框架都独立于其他框架
  使用框架的坏处
    开发人员必须同时跟踪更多的html文档
  框架结构标签
    框架结构标签（<frameset>）定义如何将窗口分割为框架
  每个 frameset 定义了一系列行或列
  rows/columns 的值规定了每行或每列占据屏幕的面积
  背景
  body 拥有两个配置背景的标签,背景是颜色或图像
  <body color="aqua"> 设置背景颜色
  <body background="/img/girl_hair_pink_1108892_1920x1080.jpg">
  URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

  提示：如果你打算使用背景图片，你需要紧记一下几点：

  背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
  背景图像是否与页面中的其他图象搭配良好。
  背景图像是否与页面中的文字颜色搭配良好。
  图像在页面中平铺后，看上去还可以吗？
  对文字的注意力被背景图像喧宾夺主了吗？



  -->
</head>
<body>
<p>我将显示 &</p>
<p>我将显示 &#8364</p>
<p>我将显示 &#x20AC</p>
<p>我将显示 ABC</p>
<p>我将显示 &#65;&#66;&#67;</p>
<h1>我的第一个 Emoji</h1>
<p>&#128512;</p>
<h1>我的第二个 Emoji</h1>
<p style="font-size: 48px">&#128512;&#128516;&#128525;&#128151;</p>
<!--内联框架-->
<iframe src="/img/girl_gesture_shorts_1066017_300x168.jpg"></iframe>
<p>一些老的浏览器不支持</p>
<p>如果得不到支持,iframe是不可见的</p>
<!--表单-->
<form action="https://www.example.com/test.asp" method="post">
  <label>
    <input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
  </label>
  <label>
    <input type="password">
  </label>
  <label>
    <input type="checkbox" checked="checked">
  </label>
  <label>
    <input type="radio" checked="checked">
  </label>
  <input type="submit">
  <input type="reset">
  <input type="hidden">
  <label>
    <select>
      <option>Apples</option>
      <option selected>Bananas</option>
      <option>Cherries</option>
    </select>
  </label>
  <label>
    <textarea name="Comment" cols="20" rows="30"></textarea>
  </label>
</form>
<!--
表单 用于收集用户输入
  表单元素指的是不同类型的input 元素 复选项 单选按钮 提交按钮
  input 元素 包含 text 常规文本输入 使用 label <input type="text">
  radio 元素 单选按钮输入 <input type="radio"> 定义单选按钮。 checked 选中
  submit 定义提交按钮
    <input type=submit> 用于处理向表单处理程序提交表单按钮
    表单处理程序通常是包含用来处理输入数据的脚本的服务器页面
    表单处理程序在表单action属性中指定
    action 属性定义在提交表单时执行的动作,向服务器提交表单的通常做法是使用提交按钮
    action 属性设置提交后的处理脚本 省略后将被设置为当前页面

  Method 属性 提交表单时所用的http方法 get 或post
  当您使用 GET 时，表单数据在页面地址栏中是可见的：
  action_page.php?firstname=Mickey&lastname=Mouse
  注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

  如果表单正在更新数据，或者包含敏感信息（例如密码）。
  POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。

用 <fieldset> 组合表单数据
<fieldset> 元素组合表单中的相关数据

<legend> 元素为 <fieldset> 元素定义标题。
html Form 属性
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ecotype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。
        target属性值
        _blank	响应显示在新窗口或选项卡中。
        _self	响应显示在当前窗口中。
        _parent	响应显示在父框架中。
        _top	响应显示在窗口的整个 body 中。
        framename	响应显示在命名的 iframe 中。
表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP post 事务（使用 method="post"）发送。

关于 GET 的注意事项：
以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串
关于 POST 的注意事项：
将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签
提示：如果表单数据包含敏感信息或个人信息，请务必使用 POST！
Autocomplete 属性
autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。
Novalidate 属性
novalidate 属性是一个布尔属性。

如果已设置，它规定提交时不应验证表单数据。

属性	            描述
accept-charset	规定用于表单提交的字符编码。
action	规定提交表单时将表单数据发送到何处。
autocomplete	规定表单是否应打开自动完成（填写）功能。
enctype	规定将表单数据提交到服务器时应如何编码（仅供 method="post"）。
method	规定发送表单数据时要使用的 HTTP 方法。
name	规定表单名称。
novalidate	规定提交时不应验证表单。
rel	规定链接资源和当前文档之间的关系。
target	规定提交表单后在何处显示接收到的响应。


select 下拉元素
  value 属性为上传属性
  selected 为预定值
HTML5 增加了如下表单元素：

  <datalist>
    <datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
    <input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
  <keygen>
  <output>
单行文本
<input type="text" name="username">
<input type="password" name="psw">
password 字段中的字符会被做掩码处理（显示为星号或实心圆）。


-->
<form>
  First name: <br>
  <label>
    <!--    定义用于文本输入的单行输入字段 表单本身不可见 默认宽度为20字符-->
    <input type="text" name="firstname">
  </label> <br>
  Last name: <br>
  <label>
    <input type="text" name="lastname">
  </label> <br>
  单选按钮输入: 单选按钮允许用户在有限数量的选项中选择其中之一 <br>
  <label>
    <input type="radio" name="sex" value="male" checked>
    Male
  </label>
  <br>
  <label>
    <input type="radio" name="sex" value="female">
    Male
  </label>
  <br>
  <br>
</form>
<!--action  属性 将action设置为当前页面 target属性 规定提交表单在何处显示响应-->
<form action="" target="_blank" method="get" autocomplete="on" novalidate>
  <fieldset>
    <legend>Personal information:</legend>
    <label for="fname">
      First name: <br>
      <input type="text" id="fname" name="firstname" value="Mickey">
    </label>
    <br>
    <label for="lname">
      Last name: <br>
      <input type="text" id="lname" name="lastname" value="Mouse">
    </label>
    <br>
    <br>
    <label>
      下拉列表: <br>
      <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab" selected>Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
      </select>
    </label>
    <br>
    <br>
    <label>
      <textarea name="message" cols="30" rows="10">
        The cat was playing in the garden.
      </textarea>
      <br>
      <button type="button" onclick="alert('Hello world')">Click Me!</button>
    </label>
    <br>
    <br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
<br>
<br>
<form>
  <label>
    <input list="browsers" name="browser">
    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>
    <input type="submit">
  </label>
</form>
<p><b>注释：</b>Safari 或 IE9（以及更早的版本）不支持 datalist 标签。</p>
<br>
<br>
<form>
  <label>
    单行文本 :<br>
    <input type="text" name="username">
    <br>
    用户密码 : <br>
    <input type="password" name="psw">
    <br>
    复选框 : <br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike
    <br>
    <input type="checkbox" name="vehicle" value="Car">I have a car
    输入数字限制 : <br>
    Quantity (between 1 and 5):
    <input type="number" name="quantity" min="1" max="5">
    <br>
<!--    输入类型 : 日期-->
    Birthday: <br>
    <input type="date" name="day">
    <br>
    Enter a date before 1980-01-01:
    <input type="date" name="day" max="1979-12-31"><br>
    Enter a date after 2000-01-01:
    <input type="date" name="day" min="2000-01-02"><br>
    <br>
    颜色选择器 :
    <input type="color" name="color">
    <br>
    范围输入 :
    <input type="range" name="points" min="0" max="10">
    <br>
    Birthday (month and year):
    <input type="month" name="bimonthly">
    <br>
    Select a week:
    <input type="week" name="week_year">
    <br>
    Select a time:
    <input type="time" name="usr_time">
    <br>
    E-mail:
    <input type="email" name="email">
  </label>
</form>
</body>
</html>
